<template>
	<view style="width: 200px;height: 500px;">
		<view class="">
			<!-- 章节内容 -->
			<scroll-view id="shdfsgd" :scroll-into-view="id" :scroll-top="height" :show-scrollbar="false"
			 scroll-y="true" style="width: 300px;height: 400px;background-color: aquamarine;" @scroll="scroll" @scrolltolower = "getNextChapter">
				<view id="demo123">
					<div v-for="item,index in chapters"
					:id= "'chapter'+item.id" :key="index" :ref = "'chapter'+item.id"  style="height: 300px;"
					>{{ item.id+ "   " +item.content }}</div>
				</view>
				<u-loading-icon mode="semicircle" text="半圆"></u-loading-icon>
			</scroll-view>
		</view>
		<view class="">
			<u-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" text="渐变色按钮"
			 @click="updateLocation('chapter1')">chapter1</u-button>
			<u-button @click="updateLocation('chapter1')">demo</u-button>
			<button @click="updateLocation('chapter2')">chapter2</button>
			<button @click="updateLocation('chapter3')">chapter3</button>
			<button @click="add()">加载下一章</button>
			<button @click="scrollLocation()">滑动指定像素</button>
			<button @click="updateLocation('chapter5')">chapter5</button>
			<button @click="updateLocation('chapter6')">chapter6</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				chapters:[{id:"1",content:"hdugyuierhgie"},
					{id:"2",content:"hdugyuierhgie"},
					{id:"3",content:"hdugyuierhgie"},
					{id:"4",content:"hdugyuierhgie"},
					{id:"5",content:"hdugyuierhgie"},
					{id:"6",content:"hdugyuierhgie"},
					{id:"7",content:"hdugyuierhgie"}
				],
				id:"",
			    height:0,
				scrollToTop:0
			}
		},
		methods: {
			// 添加新数据
			add(){
				this.chapters.push({id:this.chapters.length + 1,content:"sgdufgsud"})
				this.id = this.chapters[this.chapters.length -2].id
			},
			// 设置滑块位置到指定位置
			updateLocation(id){
				this.id = id;
				this.forceRender();
			},
			// 滑到底部事件
			getNextChapter(e){
				console.log(e)
			},
			// 滑块滑动事件
			scroll(e){
				console.log(e)
				if(Math.abs(e.detail.scrollTop - this.scrollToTop) > 3){
					this.scrollToTop = e.detail.scrollTop
					this.calcCurrLocationId()
				}
				
			},
			// 获取一个[min, max]范围内的随机整数
			getRandomInt(min, max) {
			  min = Math.ceil(min);
			  max = Math.floor(max);
			  return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			// 滑动滑块到指定位置
			scrollLocation(){
				// 假设你有一个id为'parentElement'的元素
				const parentElement = document.getElementById('demo123');
				const children = parentElement.querySelectorAll('*'); // 获取所有子元素
				const height = parseInt(children[0].style.height) + parseInt(children[1].style.height) 
				+ parseInt(children[2].style.height) ;
				const randomNum = this.getRandomInt(1, 10); 
				this.height = height -randomNum
			},
			// 计算当前所在元素，并返回ID
			calcCurrLocationId(){
				var tempHeight = parseInt(this.scrollToTop);
				// 假设你有一个id为'parentElement'的元素
				const parentElement = document.getElementById('demo123');
				const children = parentElement.querySelectorAll('*'); // 获取所有子元素
				for (var i = 0; i < children.length; i++) {
					const c = children[i];
					const h = parseInt(c.style.height);
					if( tempHeight < h){
						console.log("当前位置为：",c.id,"距离当前元素高度", tempHeight)
						return [c.id,tempHeight];
					}else{
						tempHeight = tempHeight - h
					}
				}
			},
			forceRender() {
			  // 强制组件重新渲染
			  this.$forceUpdate();
			}
		}
	}
</script>

<style>

</style>
